<template>
  <div>
    <div class="app-container mb20">
      <div class="approvalBody-header">
        <div class="approvalBody-header-title mb10">
          审批中心
        </div>
        <div class="approvalBody-header-tab">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="approvalBody-header-list first-list-border" @click="receiveFn(0)">
                <em>{{total}}</em>
                <span>待处理</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="approvalBody-header-list" @click="receiveFn(1)">
                <i class="iconfont icon-yichuli2"></i>
                <span>已处理</span>
              </div>
            </el-col>
            <!--            <el-col :span="6">-->
            <!--              <div class="approvalBody-header-list" @click="receiveFn(3)">-->
            <!--                <i class="iconfont icon-yifaqi"></i>-->
            <!--                <span>已发起</span>-->
            <!--              </div>-->
            <!--            </el-col>-->
            <el-col :span="6">
              <div class="approvalBody-header-list" @click="receiveFn(2)">
                <i class="iconfont icon-woshoudaode"></i>
                <span>我收到的</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="app-container">
      <div class="approvalBody">
        <div class="approvalBody-list" v-for="(item,index) in tabList">
          <div class="approvalBody-list-title">
            {{ item.name }}
          </div>
          <div class="approvalBody-list-box">
            <el-row :gutter="20">
              <el-col :span="4" v-for="child of item.child">
                <div class="approvalBody-list-box-line" @click="gotoLink(child)">
                  <i class="iconfont" :class="child.icon"
                     :style="{'backgroundColor': child.backgroundColor,'color': child.color}"></i>
                  <span>{{ child.name }}{{ !child.open ? '(开发中)' : '' }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-divider v-if="index<tabList.length-1"></el-divider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  listExamine
} from "@/api/system/examine";

export default {
  name: "index",
  data() {
    return {
      tabList: [
        {
          name: '假勤管理',
          child: [
            {
              name: '请假申请',
              icon: 'icon-xueshengqingjia',
              open: 1,
              backgroundColor: '#d6edfd',
              color: '#458cf7',
              key: 11
            },
            {
              name: '补卡申请',
              icon: 'icon-buka',
              open: 1,
              backgroundColor: '#d6f1b6',
              color: '#56a950',
              key: 12
            },
            {
              name: '加班申请',
              icon: 'icon-jiaban',
              open: 1,
              backgroundColor: '#fae8bd',
              color: '#eea037',
              key: 13
            },
            {
              name: '销假申请',
              icon: 'icon-xiaojiashenpi',
              open: 0,
              backgroundColor: '#fae8bd',
              color: '#eea037',
              key: 14
            }
          ]
        },
        {
          name: '人事管理',
          child: [
            {
              name: '入职申请',
              icon: 'icon-ruzhi',
              open: 0,
              backgroundColor: '#f9e2da',
              color: '#e17244',
              key: 21
            },
            {
              name: '转正申请',
              icon: 'icon-zhuanzheng',
              open: 0,
              backgroundColor: '#f9e2da',
              color: '#e17244',
              key: 22
            },
            {
              name: '调薪申请',
              icon: 'icon-tiaoxin',
              open: 0,
              backgroundColor: '#fae8bd',
              color: '#eea037',
              key: 23
            },
            {
              name: '调岗申请',
              icon: 'icon-yuangongtiaogang',
              open: 0,
              backgroundColor: '#d6edfd',
              color: '#458cf7',
              key: 24
            },
            {
              name: '离职申请',
              icon: 'icon-lizhi',
              open: 0,
              backgroundColor: '#d6edfd',
              color: '#458cf7',
              key: 25
            }
          ]
        }, {
          name: '其他',
          child: [
            {
              name: '奖励审批',
              icon: 'icon-jiangli2-mianxing',
              open: 0,
              backgroundColor: '#d6edfd',
              color: '#458cf7',
              key: 91
            },
            {
              name: '处罚审批',
              icon: 'icon-xiafachufa',
              open: 0,
              backgroundColor: '#fae8bd',
              color: '#eea037',
              key: 92
            }
          ]
        }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        style: 0,
        createTime: 'asc' // asc desc
      },
      total: 0
    }
  },
  created(){
    this.getList()
  },
  methods: {
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      listExamine(this.queryParams).then(response => {
        this.total = response.total;
      });
    },
    receiveFn(item) {
      this.$router.push(`/approval/receive/index/${item}`)
    },
    gotoLink(row) {
      if (row.open) {
        this.$router.push(`/approval/examine/index/${row.key}`)
      } else {
        this.$modal.confirm('功能开发中！').then(function () {
        }).catch(() => {
        });
      }
    }
  }
}
</script>

<style scoped>
.approvalBody-list {
  /*background: #f7f7f9;*/
  border-radius: 10px;
  /*margin-bottom: 10px;*/
  padding: 0 0px;
  overflow: hidden;
}

.approvalBody-list-title {
  font-size: 14px;
  margin-bottom: 15px;
  font-weight: bold;
}

.approvalBody-list-box-line {
  float: left;
  display: flex;
  align-items: center;
  cursor: pointer;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
}

.approvalBody-list-box-line:hover {
  background: #f4f4f4;
}

.approvalBody-list-box {
  /*padding: 0 20px;*/
}

.approvalBody-list-box-line i {
  /*background: #d6edfd;*/
  /*color: #458cf7;*/
  border-radius: 10px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.approvalBody-list-box-line span {
  font-size: 12px;
  margin-left: 10px;
}

.approvalBody-header-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  cursor: pointer;
}

.approvalBody-header-list em {
  font-size: 32px;
  font-weight: bold;
  font-style: normal;
  color: #2a99ff;
}

.approvalBody-header-list i {
  font-size: 30px;
}

.approvalBody-header-title {
  padding: 0;
  font-size: 14px;
  font-weight: bold;
}

.approvalBody-header-list span {
  font-size: 12px;
}

.first-list-border {
  border-right: 1px solid #ddd;
}
</style>
<!--<div class="approvalBody-header">-->
<!--<div class="approvalBody-header-title">-->
<!--  审批中心-->
<!--</div>-->
<!--<div class="approvalBody-header-tab">-->
<!--  <div class="approvalBody-header-list">-->
<!--    <em>3</em>-->
<!--    <span>待处理</span>-->
<!--  </div>-->
<!--  <div class="approvalBody-header-list">-->
<!--    <i class="iconfont icon-zhuanzheng"></i>-->
<!--    <span>已处理</span>-->
<!--  </div>-->
<!--  <div class="approvalBody-header-list">-->
<!--    <i class="iconfont icon-zhuanzheng"></i>-->
<!--    <span>已发起</span>-->
<!--  </div>-->
<!--  <div class="approvalBody-header-list">-->
<!--    <i class="iconfont icon-zhuanzheng"></i>-->
<!--    <span>我收到的</span>-->
<!--  </div>-->
<!--</div>-->
<!--</div>-->
